<template>
	<view class="Bax">
		<!-- 收货地址 -->
		<my-address v-if="getshop.list.length>0"></my-address>
		<!-- 标题 -->
		<view class="cart_title" v-if="getshop.list.length>0">
			<uni-icons type='shop' size='20'></uni-icons>
			<view>购物车</view>
		</view>
		
		<view class="cartBg" v-if="getshop.list.length==0">
			<image src="../../static/cart.jpg" mode="widthFix"></image>
			<view>空空如也!</view>
		</view>
		
		
	<!-- 模板 -->
		<view v-else  v-for="(item,index) in getshop.list" :key='index'>
		<uni-swipe-action>
		    <!-- 基础用法 -->
		    <uni-swipe-action-item :right-options="options" @click="onClick(item.goods_id)">
		        <view class="listBox">
		        		<view class="checkedBox">
		        			<checkbox  class="checked" :checked="item.goods_state" @click="setitemstore(item.goods_id,item.goods_state)"></checkbox>
		        		</view>
		        		<!-- 左边 -->
		        		<view class="list_left">
		        			<image  :src="item.goods_small_logo" mode="widthFix"></image>
		        		</view>
		        		<!-- 右边 -->
		        		<view class="list_right">
		        			<view class="shopName">{{item.goods_name}}</view>
		        			<view class="money">
		        				<view class="priceBox">
		        					<view class="price">单价:￥{{item.goods_price}}</view>
		        					<view class="Subtotal">小计:￥{{item.goods_price*item.goods_count}}</view>
		        				</view>
		        				<view class="computed">
		        					<view @click="setaddnum(item.goods_id,-1)">-</view>
		        					<view class="bg">{{item.goods_count}}</view>
		        					<view @click="setaddnum(item.goods_id,1)">+</view>
		        				</view>
		        			</view>
		        		</view>
		        	</view>	   
		        
		    </uni-swipe-action-item>
			</uni-swipe-action>
		</view>
				 
		<!-- 选中面板 -->
		<view class="panel">
			<view class="ckeck">
				<checkbox @click="setchenAllState(getshop.ckendAll)" :checked="getshop.ckendAll"></checkbox>全选
			</view>
			<view class="Total">合计:<text class="font">￥{{getshop.TotalPrice}}</text></view>
			<view class="settlement" @click="settleShop">结算({{getshop.numTtrue}})</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters,mapMutations,mapState} from 'vuex'
	export default {
		data() {
			return {
				options:[
				        {
				            text: '删除',
				            style: {
				                backgroundColor: '#dd524d'
				            }
				        }
				      ]
			};
		},
		computed:{
			...mapGetters('cart',['getshop']),
			...mapState('user',['useraddres']),
			...mapState('user',['token'])
			},
		methods:{
			// 结算
			settleShop(){
				if(!this.getshop.numTtrue)return uni.$showMeg('请选择要购买的商品！')
				if(this.useraddres.provinceName==undefined)return uni.$showMeg('请填写收货地址！')
				if(this.token==''){
					uni.$showMeg('请您先登录!')
					uni.switchTab({
						url:'../user/user'
					})
					return
				}
				uni.$showMeg('你还没充钱,无法购买!')
			},
			...mapMutations('cart',['setitemnum']),
			setpagenum(){
				uni.setTabBarBadge({
					index:2,
					text:this.getshop.num+''
				})
			},
			setaddnum(id,num){//修改商品数量
				let obj={id,num}
				this.setitemnum(obj)
				this.setpagenum();//修改提示数量
			},
			setitemstore(id,bool){//勾选物品
				this.$store.commit('cart/setgoodsState',{id,bool})
			},
			 onClick(id){//删除
				 this.$store.commit('cart/reovmitem',id)
				 this.setpagenum();//修改提示数量
			},
			setchenAllState(bool){//全选空单选
				this.$store.commit('cart/chenAllState',bool)
			}
		},
		onShow() {
			this.setpagenum()
		}
	}
</script>

<style lang="scss">
.cartBg{text-align: center;color:#cc9;width:200rpx;height: 200rpx;margin-left:50%;margin-top:50%;transform: translateX(-50%)translateY(-50%);}
.cartBg image{width: 100%;height: 100%;}
.cart_title{padding: 18rpx;padding-left: 0;display: flex;justify-content:start;border-bottom:1rpx #ccc solid;uni-icons{margin: 0 20rpx;}}
.listBox{display: flex;justify-content:space-around;border-bottom:1rpx #ccc solid;box-sizing: border-box;}
.list_left{flex:3;padding:0 40rpx;image{width: 100%;}}
.list_right{flex:4;display:flex;flex-direction:column;justify-content: space-around;padding:10rpx;}
.money{display: flex;justify-content:space-between;height:68rpx}
.shopName{font-size:22rpx;word-wrap: break-word;}
.computed{display: flex;justify-content:space-around;box-sizing: border-box;border: 1px #ccc solid;border-radius:10rpx;margin-right: 10rpx;}
.computed view{text-align:center;line-height:68rpx;width:48rpx;}
.bg{background-color:#ccc;color: #fff;}
.price{color:#ccc;font-size:18rpx; text-decoration:line-through}
.priceBox{display: flex;flex-direction: column;justify-content: space-around;}
.Subtotal{font-size:12px;color: red;}
.checkedBox{position: relative;margin:0 10rpx;}
.checked{position: absolute;top: 50%;transform: translateY(-50%);}
.panel{text-align:center;position:fixed;display:flex;justify-content: space-between;bottom:0;width: 100%;z-index:999;height: 108rpx;}
.settlement{height:108rpx;background-color: red;color:#fff;flex:1;line-height: 108rpx;}
.Total{border-right:1rpx #ccc solid;flex:3;line-height: 108rpx;}
.ckeck{flex:1;line-height: 108rpx;}
.font{color: red;}
</style>
